<template>
    <layout>

        <el-card class="box-card">
            <el-tabs :tab-position="tabPosition">
                <el-tab-pane label="基本设置">
                    <div class="setting">基本设置</div>
                    <div style="display: flex;">
                        <div class="userImage">
                            <div style="font-size: 20px;">用户头像</div>
                            <div style="height: 160px;margin-top: 12px;">
                                <el-image style="width: 160px;height: 160px;border-radius: 8px;" :src="list.avatar"
                                    fit="fill"></el-image>
                            </div>
                        </div>
                        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="userSettingfrom">
                            <el-form-item label="用户名" prop="username">
                                <el-input v-model="ruleForm.username" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="原始密码" prop="password">
                                <el-input v-model="ruleForm.password" show-password></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码" prop="password2">
                                <el-input v-model="ruleForm.password2" show-password></el-input>
                            </el-form-item>




                            <el-form-item>
                                <el-button type="primary" @click="submitForm('ruleForm')">确认修改</el-button>
                                <el-button @click="resetForm('ruleForm')">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="安全中心">安全中心</el-tab-pane>
                <el-tab-pane label="账号绑定">账号绑定</el-tab-pane>
                <el-tab-pane label="新消息通知">新消息通知</el-tab-pane>
            </el-tabs>
        </el-card>



        <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/homeaaa' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>用户管理</el-breadcrumb-item>
</el-breadcrumb>
        <div class="box-card">
            <el-card>

                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">


                    <el-form-item label="用户头像：">
                        <img :src="list.avatar" width="50" alt="">


                    </el-form-item>


                    <el-form-item label="用户名：">

                        <el-input type="username" v-model="ruleForm.username" maxlength="10" :disabled="true">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="用户密码：" prop="password">
                        <el-input type="password" placeholder="请输入内容" v-model="ruleForm.password" maxlength="10"
                            show-word-limit>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交修改</el-button>


                    </el-form-item>


                </el-form>


            </el-card>

        </div> -->


    </layout>
</template>
<script>
import Layout from "@/components/Layout.vue"
import axios from "axios";
export default {
    data() {
        return {
            tabPosition: 'left',
            xiugai: [],
            list: [],
            ruleForm: {
                username: 'admian',
                password: '',
                password2: ""

            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },

                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    // { min: 5, max: 8, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                password2: [
                    { required: true, message: '请确认密码', trigger: 'blur' },
                    // { min: 5, max: 8, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],

            },

        }
    },
    components: {
        Layout
    },
    created() {
        axios({
            url: 'http://43.143.166.235:8090/chaxun/info',
            headers: {
                'X-Litemall-Token': localStorage.getItem('e_token')
            }
        }).then(res => {
            console.log(res)
            this.list = res.data.data
        })
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid && this.ruleForm.password == this.ruleForm.password2) {

                    axios({
                        url: "http://43.143.166.235:8090/chaxun/login/update",
                        method: "post",
                        data: {
                            "username": this.ruleForm.username,
                            "password": this.ruleForm.password
                        },
                        headers: {
                            'X-Litemall-Token': localStorage.getItem('e_token')
                        }
                    }).then(res => {
                        console.log(res)
                        this.xiugai = res.data.data
                        if (this.xiugai === 1) {
                            alert("修改成功")
                            this.$router.push({
                                name: "homeaaa"
                            })
                        } else {
                            alert("修改失败")
                        }

                    })
                } else {
                    alert('两次密码输入不一致');
                    return false;
                }
            });

        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }

    }

}
</script>
<style>
.userSettingfrom {
    text-align: left;
    margin-left: 10px;
    border: 1px solid #ebeef5;
    padding: 16px;
    border-radius: 8px;
    width: 100%;

    .el-form-item {
        line-height: 50px;
        max-width: 460px;
    }
}

.box-card {


    height: calc(100vh - 100px);

}

.is-active {
    background: #1e78bf !important;
    color: #fff !important;
}

.setting {

    width: 100%;

    font-size: 20px;
    border-radius: 8px;
    padding: 20px;
    /* /deep/ .el-tabs__content{
        display: block !important;
    } */
}

.userImage {
    width: 300px;
    text-align: center;

    height: calc(100vh - 300px);
    padding: 20px;

    margin-left: 20px;
    border: 1px solid #ebeef5;
    border-radius: 8px;
}
</style>